<!DOCTYPE html>
<html>
<head>
    <title>Circle Spread Effect</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.156.1/three.js"></script>-->
<script type="module">
    import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // scene.background = new THREE.Color('#4141aa')
    var uniforms = {
        time: { type: "f", value: 1.0 },
        resolution: { type: "v2", value: new THREE.Vector2() }
    };

    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
        `,
        fragmentShader: `
        uniform float time;
        uniform vec2 resolution;
        varying vec2 vUv;
        void main() {
            vec2 uv = vUv;
            float dist = length(uv - vec2(0.5)); // 计算当前点到中心的距离

            float ringWidth = 0.01; // 控制圆环的宽度
            float ring = smoothstep(time, time + ringWidth, dist) - smoothstep(time + ringWidth, time + 2.0 * ringWidth, dist); // 使用 smoothstep 创建圆环
            gl_FragColor = vec4(vec3(ring), 1.0);
        }
        `,


    });

    var geometry = new THREE.PlaneGeometry(100, 100,100,100);
    var mesh = new THREE.Mesh(geometry, material);
    // mesh.rotateX(-Math.PI / 2)
    scene.add(mesh);

    function animate() {
        requestAnimationFrame(animate);

        uniforms.time.value = (uniforms.time.value + 0.005) % 1.5;

        renderer.render(scene, camera);
    }

    animate();
</script>

<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    uniform float time;
    uniform vec2 resolution;

    void main() {
        vec2 uv = gl_FragCoord.xy / resolution.xy;
        float dist = length(uv - vec2(0.5)); // 计算当前点到中心的距离
        float ringWidth = 0.01; // 控制圆环的宽度
        float ring = smoothstep(time, time + ringWidth, dist) - smoothstep(time + ringWidth, time + 2.0 * ringWidth, dist); // 使用 smoothstep 创建圆环
        gl_FragColor = vec4(vec3(ring), 1.0);
    }
</script>
</body>
</html>
